<script setup lang="ts">
import { Button, Card, CardMeta, TypographyText } from "ant-design-vue";

const props = defineProps({
  courseImage: String,
  courseName: String,
  courseAuthor: String,
  courseDescription: String,
  url: String,
  status: String,
  courseId: String,
  folderId: String,
})

const statusMap = {
  unStarted: {
    text: '未学习',
    tooltip: '您尚未开始学习，未记录到您的线上或者线下签到状态已记录',
  },
  processing: {
    text: '正在学习',
    tooltip: '您的学习时长<90min，未记录到您的线上或者线下签到状态已记录',
  },
  finish: {
    text: '已完成学习',
    tooltip: '您已学习完成',
  },
  alreadyFinish: {
    text: '已完成学习',
    tooltip: '您的线上或者线下签到状态已记录',
  },
}

const gotoVideo = () => {
  const url = `/user/learningNew/course/${props.courseId}/${props.folderId}`
  window.open(url, '_blank')
}
</script>

<template>
  <Card hoverable>
    <div class="wrapper" @click="gotoVideo">
      <img alt="课程封面" :src="courseImage" style="width: 100%; height: 160px" class="object-fill">
      <div class="content">
        <CardMeta :title="courseName" :style="{ marginBottom: '10px' }" />
        <TypographyText type="secondary">
          {{ courseDescription }}
        </TypographyText>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <TypographyText type="secondary">
            <a-tooltip placement="bottom">
              <template #title>
                <span>                {{ statusMap?.[status as keyof typeof statusMap].tooltip ?? '' }}
                </span>
              </template>
              <span :class="`status ${status}`">
                {{ statusMap?.[status as keyof typeof statusMap].text ?? '' }}
              </span>
            </a-tooltip>
          </TypographyText>
          <Button
            type="primary"
            size="small"
            :style="{
              borderRadius: '4px',
              backgroundColor: '#e6f0ff',
              color: '#4b69f4',
              borderColor: '#e6f0ff',
            }"
          >
            开始学习
          </Button>
        </div>
      </div>
    </div>
  </Card>
</template>

<style scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.content {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

.status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.unStarted {
  color: #81838F;
}

.processing {
  color: #E99D42;
}

.finish {
  color: #5ACC8F;
}

.alreadyFinish {
  color: #5ACC8F;
}

.status::before {
  content: '';
  display: flex;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: currentColor;
}
</style>
